<style>


    .noticeCont { padding: .51rem .4rem .4rem; background: rgba({$my_info['color_rgb']},1);}
    .noticeBar { border-radius: .2rem; padding: 1.08rem .32rem 0; box-sizing: border-box; width: 6.86rem; position: relative; background: #ffffff; margin: 0 auto;}
    .noticeTit { text-align: center; color: #ffffff; font-size: .32rem; line-height:.78rem ; background: url({$_G['URL']['YX2020_CSS']}images/titbg.png) center no-repeat; width: 4.27rem; height: .78rem;
        background-size: 100% auto;position: absolute; left: 50%; top: -.11rem; transform: translateX(-50%);}
    .noticeSlide { background: rgba({$my_info['color_rgb']}, .2); padding: .18rem 0 .25rem; border-radius: .1rem;}
    .noticeSlide ul {overflow: hidden;}
    .noticeSlide li { position: relative; float: left; width: 50%; text-align: center;}
    .noticeSlide li p { color: rgba({$my_info['color_rgb']}, 1); line-height: .66rem; font-size: .24rem;}
    .noticeSlide li p i { font-weight: bold; font-size: .49rem;}
    .noticeSlide li span { color: rgba(34, 34, 34, 1); font-size: .24rem; display: block; line-height: .34rem;}
    .noticeSlide li::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
        height: .65rem; width: 1px; background-color:rgba(228, 76, 70, .15);}
    .noticeBar a.moreDetail { display: inline-block;background: url({$_G['URL']['YX2020_CSS']}images/moreMsk.png) right center no-repeat;
        background-size: .18rem auto; padding-right: .2rem; font-size: .24rem; color: rgba(102, 102, 102, 1); line-height: .94rem;}
    .noticeBar { text-align: center;}
    .noticeSlide .thirdType li { width: 33.33%;}
    .closeSuccess { display: block; width: .5rem; margin: .4rem auto 0;}
    .table{max-height: 46vh;overflow-y: scroll;padding: 0 10px;overflow-x: hidden;}
    #table td{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;margin: 0 2px;}
    #loadMore{text-align: center;padding: .2rem 0;font-size: .24rem;}
    #loadMore2{text-align: center;padding: .2rem 0;font-size: .24rem;}
    .successNotice { z-index: 50; display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);}
    .sucBox { border-radius: .2rem; background-color: #ffffff; width: 6.14rem; margin: 0 auto; padding: 1rem 0 .5rem;}
    .successTitle {text-align: center; color: #ffffff; font-size: .32rem; line-height:.78rem ; background: url({$my_info['titbg']}) center no-repeat; width: 4.27rem; height: .78rem;
        background-size: 100% auto;position: absolute; left: 50%; top: -.11rem; transform: translateX(-50%);}
    .choseTab { text-align: center;}
    .choseType { border-radius: .72rem; padding: .08rem; display: inline-block; background: rgba({$my_info['color_rgb']}, .2);}
    .choseType span { display: inline-block; padding: 0 .24rem; font-size: .24rem; color: rgba({$my_info['color_rgb']}, 1);
        line-height: .55rem; border-radius: .55rem;}
    .choseType span.act { background: #ffffff;}
    .chose_Slide th { font-size: .24rem; padding: .26rem 0; color: rgba(153, 153, 153, 1); line-height: .32rem;}
    .chose_Slide td img { border-radius: 50%; width: .57rem; height: .57rem; display: inline-block;}
    .chose_Slide td {padding: .12rem 0; min-width:.6rem; font-size: .24rem; color: rgba(102, 102, 102, 1); text-align: center;max-width: 2rem;}
    .chose_Slide a.shareButton { display: block; background: rgba({$my_info['color_rgb']}, 1); color: #ffffff;
        line-height: .86rem; border-radius: .86rem; font-size: .32rem; text-align: center; margin: .32rem .5rem 0;}
    .successBanner { position: relative; width: 6.16rem; margin: .32rem auto 0;}
    .successBanner img { display: block; width: 100%; border-radius: .2rem;max-height: 4rem;}
    .successBanner::after { content: ''; position: absolute; left: .5rem; height: .32rem; top: -.32rem; width: 2px; background: #ffffff;}
    .successBanner::before { content: ''; position: absolute; right: .5rem; height: .32rem; top: -.32rem; width: 2px; background: #ffffff;}
    #table td:nth-child(2) {max-width: .4rem;}
    #successNoticeScreen {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 31;
        display: none;
    }
</style>
<div id="successNoticeScreen" onclick="closescreen()" ></div>
<div class="noticeCont">
    <div class="noticeBar">
        <div class="noticeTit" style="background: url('{$config['my_info_bgimg']}') center no-repeat; background-size: 100% auto;">
            {$my_info['title']}
        </div>
        <div class="noticeSlide">
            <ul>
                {loop $my_info['list'] $item}
                <li>
                    <p>{$item['left']}<i>{$item['num']}</i> {$item['right']}</p>
                    <span>{$item['txt']}</span>
                </li>
                {/loop}

            </ul>
        </div>
        <a href="javascript:void(0)" class="moreDetail">查看详情</a>
    </div>
</div>

<div class="successNotice">
    <div class="sucBox">
        <div class="successTitle">
            {$config['my_info_title_txt']}
        </div>
        <div class="choseTab">
            <div class="choseType">
            </div>
        </div>
        <div class="choseList">
            <div class="chose_Slide">
                <div id="table"></div>
                <a href="javascript:share_friend()" class="shareButton">分享给好友</a>
            </div>
        </div>
    </div>
    <div class="successBanner">
        <img id="ad_img" src="">
    </div>
    <span class="closeSuccess">
				<img src="{$_G['URL']['YX2020_CSS']}images/closebtn.png" >
			</span>
</div>
<script>
    let classNmae = ''
    let page = 1
    let lists = {}
    let allData = {}
    let trs=''
    // 查询列表
    function getList() {
        $.ajax({
            url: `{php echo $_G['siteroot'].createMobileUrl("GetMyInfo",array("themeid"=>$themeid));}&page=${page}&class=${classNmae}`,
            dataType: 'json',
            success: function(r) {
                lists = r.data.list[classNmae]
                render()
            }
        })
    }

    $('.moreDetail').click(function() {
        $.ajax({
            url: `{php echo $_G['siteroot'].createMobileUrl("GetMyInfo",array("themeid"=>$themeid));}`,
            dataType: 'json',
            success: function(r) {
                $('.successNotice,#successNoticeScreen').fadeIn();
                let html = ''
                for (let key in r.data.list) {
                    if (classNmae == '') {
                        classNmae = key
                    }
                    html += `
						<span data-class="${key}" class="${classNmae==key?'act':''}">${r.data.list[key].title}</span>
					`
                }
                allData = r.data.list
                if (Object.keys(allData).length>1){
                    $('.choseType').html(html)
                }else{
                    $('.successTitle').html(r.data.list[classNmae].title)
                    $('.choseType').hide()
                }
                if (r.data.ad_img){
                    $('#ad_img').attr('src',r.data.ad_img)
                }else{
                    $('.successBanner').hide()
                }

                // 切换查询类型
                $('.choseType span').click(function() {
                    // 切换table
                    classNmae = $(this).attr('data-class')
                    page = 1
                    trs=''
                    getList()
                    // 选中效果切换
                    var num = $(this).index();
                    $(this).addClass('act').siblings().removeClass('act');
                    $('.choseList .chose_Slide').eq(num).show().siblings().hide();
                })
                lists = allData[classNmae]
                render()

            }
        })
    })

    // 渲染dom
    function render() {
        const {
            list,
            head,
            key
        } = lists
        // 回显头部标题
        let th = ''
        head.forEach(h => {
            th += `
					<th>${h}</th>
				`
        })
        list.list.forEach(l => {
            let td = ''
            key.forEach(k => {
                if(k=='avatar'){
                    td += `
							<td><img src="${l[k]}"></td>
						`
                }else{
                    td += `
							<td>${l[k]}</td>
						`
                }

            })
            trs += `
					<tr>
						${td}
					</tr>
				`
        })
        let hasNext=''
        // 有下一页加载下一页
        if(list.hasNext){
            hasNext=`
					<div id="loadMore">点击加载更多</div>
				`
        }else{
            hasNext=`
					<div id="loadMore2">没有更多了~</div>
				`
        }
        let table = `
				<table width="100%" cellspacing="0" cellpadding="0">
					<tr>
						${th}
					</tr>
				</table>
				<div class="table">
					<table width="100%" cellspacing="0" cellpadding="0">
						${trs}
					</table>
					${hasNext}
				</div>
			`
        $('#table').html(table)


    }

    // 点击加载更多事件
    $('.successNotice').on('click','#loadMore',function(){
        page++
        getList()
    })
    $(function() {

        var num = $('.noticeSlide li').length;
        if (num > 2) {
            $('.noticeSlide ul').addClass('thirdType')
        }
    })
    $('#successNoticeScreen,.closeSuccess').click(function(){
        $('.successNotice,#successNoticeScreen').fadeOut();
        page = 1
        trs=''
    })
    function share_friend(){
        $('.successNotice,#successNoticeScreen').fadeOut();
        showposter('{$waittips}','{$posterurl}');
        page = 1
        trs=''
    }

</script>